<template>
    <layout-main :nav="data">
        <card-home 
        v-for="(item, index) in tableData"
        :key="index"
        :title="item.name"
        :icon="item.iconurl"
        >
            <div class="group">

                <div 
                class="item"
                v-for="(child, i) in item.navis"
                :key="i"
                @click="downloadHandler(child)"
                >
                    <div class="icon">
                        <img 
                            src="/images/icon/loading.gif"
                            v-lazy="child.iconurl" 
                            :alt="child.name"
                        />
                    </div>

                    <div class="title">
                        <div class="text">
                            {{child.name}}
                        </div>
                    </div>
                </div>
            </div>
        </card-home>
    </layout-main>
</template>

<script>
import appNode from '@js/app-node';
import CONFIG_PROJECT from '@config/project';

import LayoutMain from './layout/main.vue';

import CardHome from './components/card-home.vue';

import HOME_MAIN_MIXIN from './mixins/main.js';

export default {
    mixins: [HOME_MAIN_MIXIN],
    components: {
        LayoutMain,
        CardHome,
    },
    data() {
        return {
            tableData: [],
        };
    },
    methods: {
        queryData() {
            this.$get(`${this.$store.state.api.tbUrl}/home/getmiddlenavigate.json`, data => {
                this.tableData = data?.gjxzlist?.nodes;
            });
        },
        downloadHandler(item) {
            var {url} = item;

            this.setCzc(['首页', '点击', `下载：${item.name}`, 0, `home-doanload-click-${item.name}`]);

            if (!/(zip|exe|rar|7z)$/.test(url)) {
                window.open(url);
                return;
            }

            appNode.downloader(url, item.name);

            if (!window.electronApi) {
                // 非客户端环境，下载客户端安装包
                var downloadUrl = this.getClientDownloadUrl();

                appNode.downloader(downloadUrl, CONFIG_PROJECT.downloadUrl.exe.filename);
            }
        },
    },
    mounted() {
        this.queryData();
    },
};
</script>

<style lang="scss" scoped>
.group{
    display: flex;
    flex-wrap: wrap;

    .item{
        display: flex;
        align-items: center;
        flex: 0 1 25%;
        overflow: hidden;
        padding: 0 10px;
        height: 45px;
        cursor: pointer;

        .icon{
            display: flex;
            align-items: center;
            margin-right: 10px;

            img{
                display: block;
                width: 25px;
                height: 25px;
            }
        }

        .title{
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            font-size: 14px;
            color: #2d2d2d;
            font-weight: bold;

            .text{
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .desc{
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 12px;
                color: #C0C4CC;
            }
        }
    }
}
</style>